<template>
  <div class="contentTable">
    <div class="contentTableTop">
      <div class="contentTableTitle">课件</div>
    </div>
    <div class="contentTableContent" v-loading="loading">
      <template v-if="contentList.length">
        <div class="caseTableItem" v-for="item,index in contentList" :key="index">
          <div class="caseTableItemImageContainer" @click="handleCaseItemClick(item)">
            <img :src="item.picture" alt="" class="caseTableItemImage">
            <img src="@/assets/detail/pdfTypeIcon.png" class="caseTableItemIcon" v-if="item.fileType=='PDF'" />
            <img src="@/assets/detail/wordTypeIcon.png" class="caseTableItemIcon" v-else-if="item.fileType=='Word'" />
            <img src="@/assets/detail/pptTypeIcon.png" class="caseTableItemIcon"
              v-else-if="item.fileType=='PowerPoint'" />
          </div>
          <p class="caseTableItemName" @click="handleCaseItemClick(item)">{{item.fileName}}</p>
          <div class="caseTableItemBottom">
            <span class="caseTableItemDate">{{item.fileDesc}}</span>
            <div class="caseTableItemButtons">
              <template>
                <img v-if="item.collect" @click="reqUpdateCollect(item,0)" class="collectIcon"
                  src="https://img3.job1001.com/data_center/images/caseTableItemLiked.svg" />
                <img v-else @click="reqUpdateCollect(item,1)" class="collectIcon"
                  src="https://img3.job1001.com/data_center/images/caseTableItemLike.png" />
              </template>
              <template>
                <img @click="handleDownloadClick(item)" class="downloadBtnIcon"
                  src="https://img3.job1001.com/data_center/images/caseDownload.svg" />
                <div class="downloadBtn" @click="handleDownloadClick(item)">下载</div>
              </template>
            </div>
          </div>
        </div>
      </template>
      <el-empty class="empty" description="暂无收藏内容" v-else></el-empty>
    </div>
    <officePreviewDialog v-if="officePreviewVisible" :dialogVisible.sync="officePreviewVisible" :fileName="fileName"
      :fileSrc="fileSrc">
    </officePreviewDialog>
  </div>
</template>

<script>
import { campusCollectFiles, campusCollect } from "@/api/mine.js";
import { download } from "@/utils/fileSaver";
import officePreviewDialog from "@/components/OfficePreviewDialog";
export default {
  name: "presentationTable",
  components: {
    officePreviewDialog,
  },
  data() {
    return {
      fileSrc: "", //预览用
      officePreviewVisible: false,
      contentList: [],
      form: {
        type: "3",
      },
      typeList: [
        {
          label: "全部",
          value: "1",
        },
        {
          label: "行业",
          value: "2",
        },
        {
          label: "职业",
          value: "3",
        },
      ],
      tablePage: {
        pageNo: 1, // 第几页
        pageSize: 80, // 每页多少条
        pageSizes: [10, 20, 30], //每页多少条的可选数
        total: 0, // 总记录数
      },
      loading: false,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    determineFileType(fileUrl) {
      const fileExtension = fileUrl.split(".").pop().toLowerCase();

      const fileTypes = {
        pdf: "PDF",
        doc: "Word",
        docx: "Word",
        ppt: "PowerPoint",
        pptx: "PowerPoint",
        xls: "Excel",
        xlsx: "Excel",
      };
      if (fileTypes[fileExtension]) {
        return fileTypes[fileExtension];
      } else {
        return "Unknown File Type";
      }
    },
    fetchData() {
      this.loading = true;
      const params = {
        type: this.form.type,
        pageNo: this.tablePage.pageNo,
        pageSize: this.tablePage.pageSize,
        dataType: 2,
      };
      campusCollectFiles(params)
        .then((res) => {
          if (res.code == 200) {
            // 后端让改的 2024年7月18日14:18:49
            this.contentList = res.data.map((item) => {
              item.fileType = this.determineFileType(item.fileUrl);
              item.collect = 1;
              return item;
            });
          } else {
            console.log(res);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleCaseItemClick(item) {
      this.fileSrc = item.fileUrl;
      this.fileName = item.fileName;
      this.officePreviewVisible = true;
    },
    //下载文件
    handleDownloadClick(item) {
      const suffixList = [".pdf", ".doc", "docx", "xls", "xlsx", "pptx", "ppt"];
      const suffix = suffixList.includes(item.fileUrl.slice(-4))
        ? item.fileUrl.slice(-4)
        : ".pdf";
      download(item.fileUrl, item.fileName + suffix);
    },
    reqUpdateCollect(item, action) {
      if (!item.fileId) {
        return;
      }
      const params = {
        dataId: item.videoId || item.fileId,
        dataType: 2, //1视频 2毕业案例
        action, //1新增收藏  0取消收藏
        type: 3,
      };
      let message;
      switch (action) {
        case 1:
          message = "收藏";
          break;
        case 0:
          message = "取消收藏";
          break;

        default:
          break;
      }
      campusCollect(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(message + "成功！");

            this.$set(item, "collect", action);
            this.fetchData();
          } else {
            this.$message.error(message + "失败！");
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleFilterTypeChange(val) {
      this.tablePage.pageNo = 1;
      this.fetchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.contentTable {
  flex: 1;
  padding: 24px 24px;
  padding-right: 0px;
  .contentTableTop {
    display: flex;
    align-items: center;
    .contentTableTitle {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      margin-right: 32px;
      // margin-top: 5px;
    }
    .contentTableForm {
      ::v-deep .el-form-item {
        margin-bottom: 0px;
      }
    }
  }
  .contentTableContent {
    display: flex;
    flex-wrap: wrap;
    margin-top: 14px;
    .empty {
      flex: 1;
      min-height: 500px;
    }
    .caseTableItem {
      display: flex;
      flex-direction: column;
      width: 20%;
      // height: 343px;
      background: #f9f9f9;
      // border-radius: 8px;
      border: 2px solid transparent;
      margin: 0px;
      padding: 10px;
      &:hover {
        border: 2px solid #4880ff;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
      }
      .caseTableItemImageContainer {
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 23px;
          background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            transparent 100%
          );
          border-radius: 8px 8px 0 0;
          // box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
        }
        .caseTableItemImage {
          width: 100%;
          // height: 240px;
          color: white;
          border: 0;
          outline: 0;
          border-radius: 8px;
          box-shadow: 0 4px 2px 0px rgba(0, 0, 0, 0.08);
          cursor: pointer;
        }
        .caseTableItemIcon {
          position: absolute;
          right: 0;
          bottom: 3px;
          width: 18px;
          height: 18px;
        }
      }
      .caseTableItemName {
        height: 38px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #222222;
        line-height: 20px;
        margin: 16px 10px 10px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-inline-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .caseTableItemBottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 24px;
        margin: 0px 10px 12px;
        .caseTableItemDate {
          width: 76px;
          height: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #999999;
          line-height: 20px;
        }
        .caseTableItemButtons {
          display: flex;
          align-items: center;
          font-size: 0;
          // &:hover {
          //   .downloadBtnIcon {
          //     display: none;
          //   }
          //   .downloadBtn {
          //     display: flex;
          //   }
          // }
          .collectIcon {
            cursor: pointer;
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
          .downloadBtnIcon {
            cursor: pointer;
            width: 16px;
            height: 16px;
          }
          .downloadBtn {
            display: none;
            // margin-left: 8px;
            padding: 2px 8px;
            background: #4880ff;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
            border-radius: 6px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #ffffff;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>